<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
            <el-form-item label="国家名称-中文" prop="countryChineseName">
                <el-input v-model="queryParams.countryChineseName" placeholder="请输入国家名称-中文" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="国家名称-对应其他" prop="countryOtherName">
                <el-input v-model="queryParams.countryOtherName" placeholder="请输入国家名称-对应其他" clearable @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item label="签证名称" prop="title">
                <el-input v-model="queryParams.title" placeholder="请输入签证名称" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="标准版价格" prop="standardMoney">
                <el-input v-model="queryParams.standardMoney" placeholder="请输入标准版价格" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="快速版价格" prop="fastMoney">
                <el-input v-model="queryParams.fastMoney" placeholder="请输入快速版价格" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="团购版价格" prop="groupMoney">
                <el-input v-model="queryParams.groupMoney" placeholder="请输入团购版价格" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="有效期" prop="validityPeriod">
                <el-input v-model="queryParams.validityPeriod" placeholder="请输入有效期" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="停留时长" prop="stopTime">
                <el-input v-model="queryParams.stopTime" placeholder="请输入停留时长" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="入境次数" prop="inputFrequency">
                <el-input v-model="queryParams.inputFrequency" placeholder="请输入入境次数" clearable @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:base:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:base:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['system:base:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:base:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="baseList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="ID" align="center" prop="id" />
            <el-table-column label="国家名称-中文" align="center" prop="countryChineseName" />
            <el-table-column label="国家名称-对应其他" align="center" prop="countryOtherName" />
            <el-table-column label="签证名称" align="center" prop="title" />
            <el-table-column label="标准版价格" align="center" prop="standardMoney" />
            <el-table-column label="快速版价格" align="center" prop="fastMoney" />
            <el-table-column label="团购版价格" align="center" prop="groupMoney" />
            <el-table-column label="有效期" align="center" prop="validityPeriod" />
            <el-table-column label="停留时长(天)" align="center" prop="stopTime" />
            <el-table-column label="入境次数" align="center" prop="inputFrequency" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:base:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:base:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改国家签证基础对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="115px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="轮播图" prop="banner">
                            <el-upload ref="upload" list-type="picture-card" :file-list="fileList" :limit="fileLimitNum"
                                :action="baseUrl+ '/system/base/upload'" :on-remove="handleRemove" :on-success="handleFileSuccess"
                                :on-error="handleFileError" :on-exceed="handleExceed" :before-upload='beforeUpload'>
                                <i class="el-icon-plus"></i>
                                <div class="el-upload__tip text-center" slot="tip"></div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="国家名称-中文" prop="countryChineseName">
                            <el-input v-model="form.countryChineseName" maxlength="50" placeholder="请输入国家名称-中文" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="国家名称-对应其他" prop="countryOtherName" label-width="160px">
                            <el-input v-model="form.countryOtherName" maxlength="50" placeholder="请输入国家名称-对应其他" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="签证名称" prop="title">
                            <el-input v-model="form.title" maxlength="50" placeholder="请输入签证名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="标准版价格" prop="standardMoney">
                            <el-input-number v-model="form.standardMoney" controls-position="right" :precision="2" placeholder="请输入" :min="0.01"
                                :max="99999999999" style="width:140px"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="快速版价格" prop="fastMoney">
                            <el-input-number v-model="form.fastMoney" controls-position="right" :precision="2" placeholder="请输入" :min="0.01"
                                :max="99999999999" style="width:140px"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="团购版价格" prop="groupMoney">
                            <el-input-number v-model="form.groupMoney" controls-position="right" :precision="2" placeholder="请输入" :min="0.01"
                                :max="99999999999" style="width:140px"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="停留时长" prop="stopTime">
                            <el-input-number v-model="form.stopTime" controls-position="right" :precision="0" placeholder="请输入停留时长" :min="0.01"
                                :max="99999999999" style="width:220px"></el-input-number> 天
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="入境次数" prop="inputFrequency">
                            <el-input-number v-model="form.inputFrequency" controls-position="right" :precision="0" placeholder="请输入入境次数" :min="0.01"
                                :max="99999999999" style="width:220px"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="有效期" prop="validityPeriod">
                            <!-- <el-date-picker v-model="form.validityPeriod" type="date" placeholder="选择日期">
                            </el-date-picker> -->
                            <el-input v-model="form.validityPeriod" placeholder="请输入有效期" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="重要提示" prop="promptContent">
                            <el-input v-model="form.promptContent" maxlength="500" type="textarea" placeholder="请输入重要提示" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" type="textarea" maxlength="500" placeholder="请输入内容" />
                        </el-form-item>
                    </el-col> -->
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary"  @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listBase, getBase, delBase, addBase, updateBase } from "@/api/national/index";
import dayjs from 'dayjs'
export default {
    name: "Base",
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,

            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 国家签证基础表格数据
            baseList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                banner: null,
                countryChineseName: null,
                countryOtherName: null,
                title: null,
                standardMoney: null,
                fastMoney: null,
                groupMoney: null,
                promptContent: null,
                validityPeriod: null,
                stopTime: null,
                inputFrequency: null,
            },
            // 表单参数
            form: {
                fastMoney: undefined
            },
            // 表单校验
            rules: {
                countryChineseName: [
                    { required: true, message: '请输入国家名称-中文', trigger: 'blur' },
                ],
                countryOtherName: [
                    { required: true, message: '请输入国家名称-对应其他', trigger: 'blur' },
                ],
                title: [
                    { required: true, message: '请输入签证名称', trigger: 'blur' },
                ],
                standardMoney: [
                    { required: true, message: '请输入标准版价格', trigger: 'blur' },
                ],
                fastMoney: [
                    { required: true, message: '请输入快速版价格', trigger: 'blur' },
                ],
                groupMoney: [
                    { required: true, message: '请输入团购版价格', trigger: 'blur' },
                ],
                promptContent: [
                    { required: true, message: '请输入重要提示', trigger: 'blur' },
                ],
                validityPeriod: [
                    { required: true, message: '请输入有效期', trigger: 'blur' },
                ],
                stopTime: [
                    { required: true, message: '请输入停留时长', trigger: 'blur' },
                ],
                inputFrequency: [
                    { required: true, message: '请输入入境次数', trigger: 'blur' },
                ],
                remark: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                ],
            },
            fileLimitNum: 3,
            fileList: []
        };
    },
    created() {
        this.getList();
    },
    methods: {
        handleFileError(response, file, fileList) {
            console.log(response, file, fileList)
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            console.log(response, file, fileList)
            if (response.code == 200) {
                this.fileList = fileList
            }
            else {
                this.fileList.splice(this.fileList.length - 1, 1)
                this.$message.error(response.msg);

            }
        },
        //文件移除操作
        handleRemove(file, fileList) {
            this.fileList = fileList//或者data.fileList = []; //清空fileList所有数组    
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 ${this.fileLimitNum} 个文件`);
        },
        beforeUpload(file) {
            console.log(file.type)
            let typeList = ['image/jpeg', 'image/png']
            const isLT2M = file.size / 1024 / 1024 < 2;
            if (!typeList.includes(file.type)) {
                this.$message.error('上传图片只能是 JPG/PNG 格式!');
            }
            if (!isLT2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return typeList.includes(file.type) && isLT2M;
        },
        onSuccess(response, file, fileList) {
            this.form.avatar = URL.createObjectURL(file.raw);
        },
        /** 查询国家签证基础列表 */
        getList() {
            this.loading = true;
            listBase(this.queryParams).then(response => {
                this.baseList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                banner: null,
                countryChineseName: null,
                countryOtherName: null,
                title: null,
                standardMoney: undefined,
                fastMoney: undefined,
                groupMoney: undefined,
                promptContent: null,
                validityPeriod: null,
                stopTime: undefined,
                inputFrequency: undefined,
            };
            this.fileList = []
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加国家签证基础";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getBase(id).then(response => {
                this.form = response.data;
                console.log(this.form)
                if (response.data.banner) {
                    for (var i in response.data.banner.split(',')) {
                        let url = response.data.banner.split(',')[i]
                        this.fileList.push({
                            name: url.split('/')[url.split('/').length - 1],
                            url: url
                        })
                    }
                }
                this.open = true;
                this.title = "修改国家签证基础";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.form))
                    // params.validityPeriod = dayjs(new Date(params.validityPeriod)).format('YYYY-MM-DD')

                    let banner = []
                    for (var i in this.fileList) {
                        if (this.fileList[i].response) {
                            banner.push(this.fileList[i].response.data)
                        }
                        else {
                            banner.push(this.fileList[i].url)
                        }
                    }
                    params.banner = banner.join()

                    console.log(params)
                    if (params.id != null) {
                        updateBase(params).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.fileList = []
                            this.getList();
                        });
                    } else {
                        addBase(params).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.fileList = []
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除国家签证基础编号为"' + ids + '"的数据项？').then(function () {
                return delBase(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/base/export', {
                ...this.queryParams
            }, `base_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
}
</style>
